<template>
  <div class="bodu">
    <div class="welcome" v-if="isWX">
      <img class="logo anim-fadeIn" :src="logo">
      <!--<p>请在微信浏览器打开</p>-->
    </div>
    <!--轮播图-->
    <div v-if="swiperisShow">
      <swiper :list="swiperList" dots-position="center" :show-desc-mask="false" :auto="true" :loop="true" :duration="500"></swiper>
    </div>
    <!--客户类型-->
    <div class="CustomerType common_bg_fff">
      <div class="box_header">
        <i class="inlineBlockIcon box_header_logo_left"></i>
        <span class="font_333_34">客户类型</span>
        <i class="inlineBlockIcon box_header_logo_right"></i>
      </div>
      <ul class="CustomerTypeLIST">
        <li class="CustomerType_li">
          <i class="inlineBlockIcon sc"></i>
          <span class="font_333_30">商超</span>
        </li>
        <li class="CustomerType_li">
          <i class="inlineBlockIcon qy"></i>
          <span class="font_333_30">企业</span>
        </li>
        <li class="CustomerType_li">
          <i class="inlineBlockIcon yy"></i>
          <span class="font_333_30">医院</span>
        </li>
        <li class="CustomerType_li">
          <i class="inlineBlockIcon gx"></i>
          <span class="font_333_30">高校</span>
        </li>
        <li class="CustomerType_li">
          <i class="inlineBlockIcon sy"></i>
          <span class="font_333_30">事业单位</span>
        </li>
        <li class="CustomerType_li">
          <i class="inlineBlockIcon gc"></i>
          <span class="font_333_30">工厂</span>
        </li>
        <li class="CustomerType_li">
          <i class="inlineBlockIcon wl"></i>
          <span class="font_333_30">物流中心</span>
        </li>
        <li class="CustomerType_li">
          <i class="inlineBlockIcon ck"></i>
          <span class="font_333_30">仓库</span>
        </li>
      </ul>
    </div>
    <!--回收品类-->
    <div  class="recoveryType common_bg_fff">
      <div class="box_header">
        <i class="inlineBlockIcon box_header_logo_left"></i>
        <span class="font_333_34">回收品类</span>
        <i class="inlineBlockIcon box_header_logo_right"></i>
      </div>
      <ul class="recoveryTypeLIST">
        <li class="recoveryType_li" v-for="(item, index) in recoveryTYPELIST">
          <!--<div class="recoveryType_li_box">-->
            <div class="paperlogo" v-show="item.id==1"></div>
            <div class="suliaologo" v-show="item.id==2"></div>
            <div class="jinshulogo" v-show="item.id==3"></div>
            <!--<div class="recoveryType_li_box_center">-->
              <p class="recoveryType_price">{{item.class_price}}元/公斤起</p>
              <p class="font_333_30">{{item.class_name}}</p>
            <!--</div>-->
          <!--</div>-->
        </li>
      </ul>
      <!--<p class="recovery_btn font_fff_34" @click="linkTOrecovery">去下单</p>-->
      <p class="recovery_btn font_fff_34" @click="recoveryBTN(0)">企业下单</p>
    </div>
    <!--回收流程-->
    <div class="recoveryProcess common_bg_fff">
      <div class="box_header">
        <i class="inlineBlockIcon box_header_logo_left"></i>
        <span class="font_333_34">回收流程</span>
        <i class="inlineBlockIcon box_header_logo_right"></i>
      </div>
      <ul class="processLIST">
        <li class="process_li">
          <i class="inlineBlockIcon progress1"></i>
          <span class="font_333_28">预约回收</span>
        </li>
        <li class="shenglue"><span class="iconfont icon-more"></span></li>
        <li class="process_li">
          <i class="inlineBlockIcon progress2"></i>
          <span class="font_333_28">填写信息</span>
        </li>
        <li class="shenglue"><span class="iconfont icon-more"></span></li>
        <li class="process_li">
          <i class="inlineBlockIcon progress3"></i>
          <span class="font_333_28">等待回收</span>
        </li>
        <li class="shenglue"><span class="iconfont icon-more"></span></li>
        <li class="process_li">
          <i class="inlineBlockIcon progress4"></i>
          <span class="font_333_28">收益到账</span>
        </li>
      </ul>
    </div>
    <!--我要下单-->
    <div class="lastbox">
      <div class="lastbox_logo"></div>
      <p>企业回收，就找卡库</p>
      <ul class="btnLIST">
        <!--<div class="xiadanBTN font_fff_34" @click="recoveryBTN(0)">企业下单</div>-->
        <!--<div class="xiadanBTN font_fff_34" @click="recoveryBTN(1)">个人下单</div>-->
        <div class="titleBOX font_fff_34">上门回收重量须20公斤起</div>
      </ul>
    </div>
    <!--底部tab-->
    <ul class="tab common_bg_fff">
      <li class="font_28AC4F_36"><span class="iconfont icon-shouye"></span><span>首页</span></li>
      <li class="font_999_36" @click="toUserCenter"><span class="iconfont icon-wode-wode"></span><span>我的</span></li>
    </ul>

    <!--下单遮罩层-->
     <div class="xiadanTYPEBOX" v-if="xiadan" @click="closexiadanTYPEBOX">
      <ul>
        <li @click="recoveryBTN(0)">
          <i class=" inlineBlockIcon xiadanTYPELOGO qiye"></i>
          <span>企业回收</span>
        </li>
        <!--<li @click="recoveryBTN(1)">-->
          <!--<i class=" inlineBlockIcon xiadanTYPELOGO geren"></i>-->
          <!--<span>个人回收</span>-->
        <!--</li>-->
      </ul>
    </div>

    <!--没有绑定，弹出去绑定页-->
    <div class="comon_bg_black" v-if="isNObind">
      <div class="choice_box common_bg_fff">
        <p class="font_333_34">您还未绑定手机号，暂不能下单！</p>
        <ul class="choice_btn">
          <li @click="cancelBind">再看看</li>
          <li @click="linkTObind">去绑定</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper } from 'vux'
import logo from './img/loading.gif'
  export default {
    name: '',
    components: {
      Swiper
    },
    data () {
      return {
        isWX:true,
        logo: logo,
        swiperisShow:true,
        swiperList:[],
        title:'卡库回收',
        xiadan:false,
        xiadanTYPE:null,
        recoveryTYPELIST:[],
        isNObind:false
      }
    },
    created () {
      this.setTitle(this.title)
      this.$store.commit('xiadanTYPE',null)
      this.$store.commit('orderTYPE',null)

      if(this.$store.state.swiperList.length==0){
        this.axios.post('/home/Api/bannerList',{token:this.$store.state.token}).then((res)=> {
          if(res.data.code==201){
            let data = res.data.data
            if(data.length<=0){
              this.swiperisShow = false
              return
            }
            let arr = []
            for(let key in data){
              let obj = {
                img:this.axios.defaults.baseURL+data[key].img,
                url:data[key].url
              }
              arr.push(obj)
            }
            this.swiperList = arr
            this.$store.commit('swiperList',arr)
          }
        })
      }else{
        this.swiperList = this.$store.state.swiperList
      }
      if(this.$store.state.getPrice.length==0){
        this.axios.post('/home/Order/getPrice',{token:this.$store.state.token}).then((res)=>{
          if(res.data.code==200){
            this.$store.commit('bind',res.data.is_bund)
            this.$store.commit('getPrice',res.data.data)
            this.recoveryTYPELIST = res.data.data
          }
        })
      }else{
        this.recoveryTYPELIST = this.$store.state.getPrice
      }

    },
    mounted: function() {
      this.isWX = false
    },
    methods: {
      recoveryBTN(type){
        if(this.$store.state.bind==0){
          this.isNObind = true
          return
        }
        this.$store.commit('orderTYPE',type)
        this.$router.push('/recoveryIndex')
      },
      linkTOrecovery(){
        if(this.$store.state.bind==0){
          this.isNObind = true
          return
        }
        this.xiadan = true
//        this.$store.commit('xiadanTYPE',type)
      },
      toUserCenter(){
        this.$router.push('/userCenter')
      },
//      关闭遮罩层
      closexiadanTYPEBOX(){
        this.xiadan = false
      },
      cancelBind(){
        this.isNObind = false
      },
      linkTObind(){
        this.$router.push('/binding')
      }
    }
  }
</script>

<style scoped>
  @import "../../assets/public.css";
  @import "//at.alicdn.com/t/font_814275_tegrvkvjgbd.css";

  .welcome{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgb(251, 251, 251);
    font-size: 16px;
    text-align: center;
    color: #999;
    z-index:100;
  }
  .logo{
    display: block;
    margin: 0 auto;
    padding-top: 70%;
    width: 50%;
  }

  .box_header{
    display: flex;
    align-items: center;
    /*align-items: flex-end;*/
    justify-content: center;
    height: 1rem;
  }
  .box_header>span{
    padding:0 0.3rem;
  }
  .box_header>i{
    width:1.85rem;
    height:0.02rem;
  }
  .box_header_logo_left{
    background: url("img/left_logo.png");
  }
  .box_header_logo_right{
    background: url("img/right_logo.png");
  }

  /*客户类型ul*/
  .CustomerType{
    width:100%;
    height:4.73rem;
  }
  .CustomerTypeLIST{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
  }
  .CustomerType_li{
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding:0 .4rem;*/
    width:1.875rem;
    margin-bottom:.4rem;
  }
  .CustomerType_li>span{
    margin-top:.25rem;
  }
  .sc{
    width:.57rem;
    height:.53rem;
    background-image: url("img/sc.png");
  }
  .qy{
    width:.62rem;
    height:.66rem;
    background-image: url("img/qy.png");
  }
  /*.cs{*/
    /*width:.56rem;*/
    /*height:.56rem;*/
    /*background-image: url("img/cs.png");*/
  /*}*/
  .yy{
    width:.54rem;
    height:.65rem;
    background-image: url("img/yy.png");
  }
  .gx{
    width:.63rem;
    height:.63rem;
    background-image: url("img/gx.png");
  }
  .sy{
    width:.61rem;
    height:.55rem;
    background-image: url("img/sy.png");
  }
  .gc{
    width:.64rem;
    height:.64rem;
    background-image: url("img/gc.png");
  }
  .wl{
    width:.68rem;
    height:.50rem;
    background-image: url("img/wl.png");
  }
  .ck{
    width:.62rem;
    height:.55rem;
    background-image: url("img/ck.png");
  }

  /*回收品类*/
  .recoveryType{
    width:100%;
    height:5.09rem;
    margin-top:.26rem;
  }
  .recoveryTypeLIST{
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .recoveryType_li{
    width: 2.07rem;
    height:2.5rem;
    /*box-shadow:0 4px 13px rgba(159,159,175,0.18);*/
    /*padding: .35rem 0 .39rem;*/
    padding-bottom: .27rem;
    box-sizing: border-box;
    background:rgba(255,255,255,1);
    box-shadow:0 0 13px rgba(159,159,175,0.18);
    display: flex;
    flex-direction: column;
    /*width:100%;*/
    align-items: center;
    justify-content: flex-end;
  }
  .paperlogo{
    width:.68rem;
    height:.82rem;
    background-image: url("img/paper.png");
    background-size: 100% 100%;
  }
  .suliaologo{
    width: 1.04rem;
    height:.7rem;
    background-image: url("img/suliao.png");
    background-size: 100% 100%;
  }
  .jinshulogo{
    width: .85rem;
    height:.78rem;
    background-image: url("img/jinshu.png");
    background-size: 100% 100%;
  }
  .recoveryType_li_box{
    display: flex;
    flex-direction: column;
    width:100%;
    align-items: center;
    justify-content: flex-start;
  }
  .recoveryType_li_box_center{
    display: flex;
    align-items: left;
    flex-direction: column;
    justify-content: space-between;
    height:.82rem;
  }
  .recoveryType_price{
    font-size:.32rem;
    color: #28AC4F;
    margin-top:.26rem;
    margin-bottom: .22rem;
  }
  .recovery_btn{
    width:2.49rem;
    height:.72rem;
    line-height: .72rem;
    /*border: 1px solid #28AC4F;*/
    background-color: #28AC4F;
    border-radius: .36rem;
    text-align: center;
    margin:.47rem auto 0;
  }
  /*回收流程*/
  .recoveryProcess{
    width:100%;
    height:2.65rem;
    margin-top:.26rem;
  }
  .processLIST{
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
  }
  .process_li{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .process_li>span{
    margin-top:.38rem;
  }
  .progress1{
    width:.51rem;
    height:.51rem;
    background-image: url("img/progress1.png");
  }
  .progress2{
    width:.48rem;
    height:.48rem;
    background-image: url("img/progress2.png");
  }
  .progress3{
    width:.44rem;
    height:.52rem;
    background-image: url("img/progress3.png");
  }
  .progress4{
    width:.47rem;
    height:.47rem;
    background-image: url("img/progress4.png");
  }
  .shenglue{
    margin-bottom:.7rem;
  }
  /*我要下单*/
  .lastbox{
    width:100%;
    height:3.18rem;
    background-image: url("img/bg.png");
    background-size: 100% 100%;
    padding:0;
    margin-top:.26rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: space-between;*/
  }
  .lastbox_logo{
    width:.9rem;
    height:.85rem;
    background-size: 100% 100%;
    background-image: url("img/logo.png");
    margin:.37rem 0 .27rem;
  }
  .btnLIST{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .xiadanBTN{
    width: 2.49rem;
    height:.72rem;
    margin:.39rem .3rem 0;
    text-align: center;
    background:#28ac4f; /* 一些不支持背景渐变的浏览器 */
    background: -webkit-linear-gradient(right, #28ac4f, #3aab5c); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #28ac4f, #3aab5c); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #28ac4f, #3aab5c); /* Firefox 3.6 - 15 */
    background: linear-gradient(right, #28ac4f, #3aab5c); /* 标准的语法 */
    border-radius: .36rem;
    line-height: .72rem;
    box-sizing: border-box;
  }
  .titleBOX{
    /*width: 2.49rem;*/
    padding-left: .4rem;
    padding-right: .4rem;
    display: inline-block;
    height:.72rem;
    margin:.39rem .3rem 0;
    text-align: center;
    vertical-align: middle;
    background:#278CDE; /* 一些不支持背景渐变的浏览器 */
    /*background: -webkit-linear-gradient(right, #28ac4f, #3aab5c); !* Safari 5.1 - 6.0 *!*/
    /*background: -o-linear-gradient(right, #28ac4f, #3aab5c); !* Opera 11.1 - 12.0 *!*/
    /*background: -moz-linear-gradient(right, #28ac4f, #3aab5c); !* Firefox 3.6 - 15 *!*/
    /*background: linear-gradient(right, #28ac4f, #3aab5c); !* 标准的语法 *!*/
    border-radius: .36rem;
    line-height: .72rem;
    box-sizing: border-box;
  }
  /*底部tab*/
  .bodu{
    padding-bottom:.98rem;
  }
  .tab{
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    height:.98rem;
    width:100%;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
    display: flex;
    align-items: center;
    margin-top:.26rem;
  }
  .tab>li{
    flex:1;
    height:.98rem;
    text-align: center;
    line-height: .98rem;
  }
  .tab>li>span:last-child{
    padding-left:0.1rem;
  }
  .tab>li:first-child{
    border-right:1px solid #ddd;
  }

  /*遮罩层*/
  .xiadanTYPEBOX{
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color: rgba(255,255,255,.8);
  }

  .xiadanTYPEBOX>ul{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
  }
  .xiadanTYPELOGO{
    width:1.77rem;
    height:1.77rem;
    background-size: 100% 100%;
    margin-bottom:.32rem;
  }
  .xiadanTYPEBOX .qiye{
    background-image: url("img/qiye.png");
  }
  .xiadanTYPEBOX .geren{
    background-image: url("img/geren.png");
  }
  .xiadanTYPEBOX>ul>li{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .xiadanTYPEBOX>ul>li:last-child{
    margin-top:.86rem;
  }

  /*未绑定弹出*/
  .choice_box{
    width:5.41rem;
    height:2.51rem;
    border-radius: .3rem;
    /*margin:0 auto;*/
    transform: translate(-50%,-50%);
    position: absolute;
    top:50%;
    left:50%;
  }
  .choice_box>p{
    height:1.52rem;
    line-height: 1.52rem;
    text-align: center;
  }
  .choice_btn{
    height:.98rem;
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
  }
  .choice_btn>li:first-child{
    border-right: 1px solid #ddd;
  }
  .choice_btn>li{
    flex:1;
    height:.98rem;
    font-size:.36rem;
    color: #3794E1;
    text-align: center;
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    line-height: .98rem;
  }
</style>
